<!DOCTYPE html>
<html>


<head>

    <!--引入公用模板-->
    <%- include ../taglib/layout-map.ejs %>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content" style="padding:5px">
    <div class="row animated fadeInDown">
        <div class="col-sm-3" id="mapleft" style="">
            <div class="ibox float-e-margins" >
                <div class="ibox-title">
                    <h5 style="padding-left: 30px">图例</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                    <div class="col-md-12 stateArea" id="IdentificationInfo" style="padding:0;">
                        <div class="col-md-12 form-group">
                            <div class="col-md-4 col-sm-4 col-xs-4 stateIcon text-center tulipadding">
														<span class="offlineIconArea" style="cursor:pointer"
                                                              id="chooseMiss" type="button">
															<span class="btnImage iconArea offlineIcon_ico_docu"></span>离线
														</span>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span class="onlineNotPositioningArea" style="cursor:pointer"
                                                              id="chooseNot" type="button">
															<span class="btnImage iconArea onlineNotPositioning_ico_docu"></span>未定位
														</span>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-4 stateIcon text-center tulipadding">
														<span type="button" id="chooseAlam" style="cursor:pointer"
                                                              class="warningArea">
															<span class="btnImage iconArea warning_ico_docu"></span>报警
														</span>
                            </div>
                        </div>
                        <div class="col-md-12 form-group">
                            <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span class="onlineDrivingArea" style="cursor:pointer"
                                                              id="chooseRun" type="button">
															<span class="btnImage iconArea onlineDriving_ico_docu"></span>行驶
														</span>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span type="button" id="chooseStop" style="cursor:pointer"
                                                              class="onlineParkingArea">
															<span class="btnImage iconArea onlineParking_ico_docu"></span>停止
														</span>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span type="button" id="chooseOverSeep" style="cursor:pointer"
                                                              class="speedLimitWarningArea">
															<span class="btnImage iconArea speedLimitWarning_ico_docu"></span>超速
														</span>
                            </div>
                        </div>
                        <legend></legend>
                        <!--0绿色是跑的，1红色是异常的，2灰色是离线的,3蓝色是停止的，-->
                        <div class="col-md-12 form-group">
                            <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span class="onlineDrivingArea" style="cursor:pointer"
                                                              id="chooseRun" type="button">
															<span class="btnOnline iconArea1"></span>行驶
														</span>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span type="button" id="chooseStop" style="cursor:pointer"
                                                              class="onstopArea">
															<span class="btnStop iconArea1"></span>停止
														</span>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span type="button" id="chooseOverSeep" style="cursor:pointer"
                                                              class="offlineIconArea">
															<span class="btnOffline iconArea1"></span>离线
														</span>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span type="button" id="chooseOverSeep" style="cursor:pointer"
                                                              class="onlineParkingArea">
															<span class="btnError iconArea1"></span>异常
														</span>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 clearfix" id="mapright" style="padding-left:5px">
            <div class="row animated fadeInDown">
                <div class="col-sm-12 clearfix" style="padding-left:5px;margin-top: 2px;margin-bottom: 0px">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5 style="padding-left: 30px">实时追踪</h5>
                        </div>
                        <div class="ibox-content" style="height: 700px;padding:1px">
                            <div style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                                <div id="map"
                                     style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
                                <div id="app-right-top">
                                    <div id="user-center" class="ui3-user-center-wrap">
                                        <div class="avatar-abstract"></div>
                                    </div>
                                </div>
                            </div>
                            <div id="goShow"  style="display: none;" onclick="displayLeft()">
                                <i id="goHidden" class="fa fa-chevron-right"></i>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--<input type='button' text='dianji' onclick="play_sound()"/>-->
<input type="hidden" id="h_c_car_id" value="<%=carId%>">
<%- include ../taglib/layout-content.ejs %>
<script type="text/javascript">
    //    部门车辆树
    $(function () {
        var carId = $("#h_c_car_id").val();
        queryCarsByNo(carId,"0");
        $('body').everyTime('2das', 'refData', refData, 0, true);
    });

</script>

<!--map-->
<script type="text/javascript">
    // 百度地图API功能
    var map;
    var panorama;
    var carIocnPath = "/js/mapPlugins/img/";
    var lastMark = [];
    var lastCarMark = {};//终端数组
    var opts = {
        width : 0,
        height: 0,
//        title : "实时信息" , // 信息窗口标题
        panel: "panel",
        enableMessage: true,//设置允许信息窗发送短息
        searchTypes: [
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    };
    //    var carIcon="car_online0.fw";
    $(function () {
        map = new BMap.Map('map');
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.enableScrollWheelZoom();
        map.addControl(new BMap.MapTypeControl());


        var contextMenu = new BMap.ContextMenu();
        var txtMenuItem = [
            {
                text: '放大',
                callback: function () {
                    map.zoomIn()
                }
            },
            {
                text: '缩小',
                callback: function () {
                    map.zoomOut()
                }
            },
            {
                text: '放置到最大级',
                callback: function () {
                    map.setZoom(18)
                }
            },
            {
                text: '查看全国',
                callback: function () {
                    map.setZoom(4)
                }
            },
            {
                text: '关闭实景地图',
                callback: function () {
                    exitqj();
                }
            },
            {
                text: '在此添加标注',
                callback: function (p) {
                    var marker = new BMap.Marker(p), px = map.pointToPixel(p);
                    map.addOverlay(marker);
                }
            }
        ];
        for (var i = 0; i < txtMenuItem.length; i++) {
            contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
            if (i == 1 || i == 3) {
                contextMenu.addSeparator();
            }
        }
        map.addContextMenu(contextMenu);
        var jw = '<%= jw %>';
        initPoint(jw);


//
        panorama = new BMap.Panorama('map');
        panorama.setPov({heading: -40, pitch: 6});
        var stCtrl = new BMap.PanoramaControl(); //构造全景控件
        stCtrl.setOffset(new BMap.Size(50, 50));
        map.addControl(stCtrl);//添加全景控件

    });




    //刷新车辆列表
    function queryCars() {
        var allCarIds = $("#h_all_car_id").val();
        var jsonstr = [{"allCarIds": allCarIds}];
        gpsTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
    }
    //刷新报警列表
    function querywarnings() {
//        var start = $("#start").val();
//        var end = $("#end").val();
//        var code = $("#serchStr").val();
        var jsonstr = [];
        warningTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
        var info=warningTable.DataTable().rows().data();
        if(info && info.length>0){
//            play_sound();
        }
        var recordsTotal=info.recordsTotal;
    }
    //刷新车辆状态标题
    function querycartitle() {
        $.ajax({
            async: false,
            url: '/map/cartitle',
            type: "get",
            dataType: 'json',
            success: function (data) {
                if (data.success) {
                    var resData = data.data;
                    var warningtitle = "";

                    if (resData) {
                        warningtitle = "状态信息:操作日志(全部 " + resData.totalNum + ",在线：" + resData.onlineNum + ",离线：" + resData.offlineNum + ",行驶：" + resData.speedNum + ",停车：" +
                            resData.stopNum + ",在线率：" + resData.rate + ")"
                    } else {
                        warningtitle = "状态信息:操作日志(全部 " + 0 + "在线：" + 0 + " 离线：" + 0 + "行驶：" + 0 + " 停车：" + 0 + " 在线率：" + 100 % +")"

                    }
                    $("#warningRef").html(warningtitle);
                    $("#allcar").html("全部("+resData.totalNum+")");
                    $("#onlinecar").html("在线("+resData.onlineNum+")");
                    $("#offlinecar").html("离线("+resData.offlineNum+")");


                } else {
//                    swal({
//                        title: "系统提示",
//                        text: data.msg,
//                        type: "error"
//                    });
                }

            }
        })

    }
    //    ajax获取数据：根据车牌号获取实时数据，
    //    车牌号逗号分隔
//    ismanyIds=0dange  =1duoge

    function queryCarsByNo(carIds,ismanyIds,baseCarNo) {
        $.ajax({
            async: false,
            url: '/map/cars',
            type: "post",
            dataType: 'json',
            data: {
                carIds: carIds,
                ismanyIds:ismanyIds
            },
            success: function (data) {
                if (data) {
                    var resData = data.data;
                    debugger;
                    $.each(resData, function (key, value) {
                        var carObj = value;
                        //0绿色是跑的，1红色是异常的，2灰色是离线的,3蓝色是停止的，
                        var carError = 0;
                        var carstatus = "在线停止状态";
//                        点火， 熄火
                        var accstatus = "熄火";
                        var addressDetail = "无详细地址信息!";
                        //jwToAddress(carObj.jd,carObj.wd);
                        var myGeo = new BMap.Geocoder();
                        myGeo.getLocation(new BMap.Point(carObj.jd, carObj.wd), function (result) {
                            if (result) {
                                addressDetail = result.address;
                            }
                            if (carObj.onlineName == "0") {
                                carError = 2;
                                carstatus = "离线状态";
                            } else if (carObj.onlineName == "1" && parseInt(carObj.speed) == 0) {
                                carError = 3;
                            } else if (carObj.onlineName == "1" && parseInt(carObj.speed) > 0) {
                                carError = 0;
                                carstatus = "在线行驶状态"
                            }

                            if (carObj.accFlag == "1") {
                                accstatus = "点火";
                            }
                            var gpsPowerStatus = carObj.gpsPowerStatus;
                            var acc = carObj.accFlag;
                            var oneHigh = carObj.oneHigh;
                            var str=""
                            if(gpsPowerStatus == 1){
                                str="主电正常, "
                            }else{
                                str="主电异常, "
                            }
                            if (acc == 1) {
                                str = str+"点火, "
                            }else{
                                str = str+"熄火, "
                            }
                            if(oneHigh){
                                str=str+" 时长: "+oneHigh+"分钟"
                            }else{
                                str=str+" 时长: 0 分钟"
                            }


                            var content = '<div class="ibox float-e-margins">' +
                                '<div class="">' +
                                '<h5>实时信息</h5>' +
                                '</div>' +
                                '<div class="ibox-content"> ' +
//                            '<div class="ibox-content ">' +
                                '车牌号：' + carObj.baseCarNo + '<br/>' +
                                '定位时间：' + carObj.gpsDate + '<br/>' +
                                '车辆类型:' + carObj.carType + '<br/>' +
                                '所属用户:' + carObj.deptName + '<br/>' +
                                '终端号:' + carObj.terminal + '<br/>' +
                                'sim卡号:' + carObj.sim + '<br/>' +
                                '当日里程:' + carObj.daydis + 'KM<br/>' +
                                '当月里程:' + carObj.monthDis + 'KM<br/>' +
                                '行驶速度:' + carObj.speed + '<br/>' +
                                '状态:' + str + '<br/>' +
//                                '在线状态:' + carstatus + '<br/>' +
                                '当前位置:' + addressDetail + '<br/>' +
//                                '<div class="row">' +
//                                '<div class="col-sm-3">' +
//                                '   <button class="btn btn-primary btn-block m-t" onclick="editGps(0,'+carObj.id+')"><i class="fa fa-edit"></i>车辆</button>' +
//                                '</div>' +
//                                '<div class="col-sm-3">' +
//                                '   <button class="btn btn-primary btn-block m-t" onclick="openSj('+carObj.wd+','+carObj.jd+')"><i class="fa fa-map"></i>实景</button>' +
//                                '</div>' +
//                                '<div class="col-sm-3">' +
//                                '   <button class="btn btn-primary btn-block m-t" onclick="openhis()"><i class="fa fa-map-marker"></i> 轨迹</button>' +
//                                '</div>' +
//                                '<div class="col-sm-3">' +
//                                ' <button class="btn btn-primary btn-block m-t" onclick="openzz()"><i class="fa fa-arrow-down"></i> 追踪</button>' +
//                                '</div>' +
//                                '</div>' +
//                                '</div>' +
                                '</div>';
                            '</div>';
                            var panTo=true
                            addMarker(carObj.wd, carObj.jd, carObj.baseCarNo, carObj.driection, carError, content,panTo);
                        });


                    });

                } else {
//                    swal({
//                        title: "系统提示",
//                        text: data.msg,
//                        type: "error"
//                    });
                }

            }
        })
    }
    //    刷新数据
    var refData = function refCarsById() {
        cleanAll();
        var carId = $("#h_c_car_id").val();
        queryCarsByNo(carId,"0");
    }


    /**
     * 清除标注
     */
    function clean() {
        map.clearOverlays();
    }

</script>
</body>

</html>
